<template>
	<view class="contain">
		<view class="title">
			成绩查询
		</view>
		<scroll-view class="list" scroll-y="true">
			<view class="item black">
				<scroll-view scroll-x="true" class="scroll">
					课程名
				</scroll-view>
				<scroll-view scroll-x="true" class="scroll2">
					成绩
				</scroll-view>
				<scroll-view scroll-x="true" class="scroll2">
					学分
				</scroll-view>
				<scroll-view scroll-x="true" class="scroll2">
					绩点
				</scroll-view>
			</view>
			<view class="item" v-for="(item,index) in scores" @longpress="show(index)">
				<scroll-view scroll-x="true" class="scroll">
					{{item.select.course.name}}
				</scroll-view>
				<scroll-view scroll-x="true" class="scroll2">
					{{item.score}}
				</scroll-view>
				<scroll-view scroll-x="true" class="scroll2">
					{{item.select.course.credit}}
				</scroll-view>
				<scroll-view scroll-x="true" class="scroll2">
					{{item.gpa}}
				</scroll-view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/index.js'; // 引入api
	export default {
		data() {
			return {
				scores: {

				}
			};
		},
		onLoad() {
			let token = uni.getStorageSync("token")
			api.getScore(token).then((res) => {

				if (res.code === 1) {
					this.scores = res.data
					console.log(this.scores)
				} else {
					// if (res.errors =="未找到。")
					// uni.showModal({
					// 	content: res.errors
					// })
				}

			}).catch((err) => {
				// uni.showModal({
				// 	content: 
				// })
			})
		},
		methods: {
			show(index) {
				uni.showModal({
					content: "教师评语：" + this.scores[index].comment,
					showCancel: false,
				})
			}
		}
	}
</script>

<style lang="less">
	.contain {
		.title {
			height: 100px;
			line-height: 100px;
			background-color: #a62618;
			text-align: center;
			color: white;
			font-size: 25px;
		}

		.list {
			background-color: #EEEEEE;
			height: calc(100vh - 200px);
			// margin-top: 12px;

			.item {
				height: 40px;
				background-color: white;
				border-bottom: #a62618 1px solid;
				color: #888;
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-size: 12px;

				.scroll {
					width: 500rpx;

				}

				.scroll2 {
					width: 70rpx;

				}
			}

			.black {
				color: black;
			}
		}
	}
</style>
